
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta

            name="viewport"

            content="initial-scale=1,maximum-scale=1,user-scalable=no"

    />

    <title>天地图矢量poi底图加载</title>

    <style>

        html,

        body,

        #viewDiv {

            padding: 0;

            margin: 0;

            height: 100%;

            width: 100%;

        }

    </style>



    <link

            rel="stylesheet"

            href="https://js.arcgis.com/4.16/esri/themes/light/main.css"

    />

    <script src="https://js.arcgis.com/4.16/dojo/dojo.js"></script>



    <script>

        require(["esri/Map", "esri/views/MapView","esri/layers/WebTileLayer",
                "esri/widgets/LayerList",
                "esri/layers/WMTSLayer"],
            function(Map, MapView,WebTileLayer,LayerList,WMTSLayer
            ) {



            var tiledLayer = new WebTileLayer({
                urlTemplate:
                    "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=0f4e449733d7e3130129d9a1cc986df2",

                subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],

            });


            var tiledLayer_poi = new WebTileLayer({

                urlTemplate:

                    "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=0f4e449733d7e3130129d9a1cc986df2",

                subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],

            });
                var tsLayer = new WMTSLayer({
                   url: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX=1&TILEROW=1&TILECOL=1&tk=0f4e449733d7e3130129d9a1cc986df2",

                    activeLayer: {
                        id: "SRTM_Color_Index"
                    }
                });


                var tdtMap_img = new WebTileLayer({//天地图影像
//                                                           //http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥
                 //   urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=0f4e449733d7e3130129d9a1cc986df2",

                 //   urlTemplate:"http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}" + "&TILEROW={row}"  + "&TILECOL={col}"  + "&FORMAT=tiles" + "&tk=0f4e449733d7e3130129d9a1cc986df2",
                    //地形晕渲  http://t0.tianditu.gov.cn/ter_c/wmts?tk
                //    urlTemplate:"http://t0.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}" + "&TILEROW={row}"  + "&TILECOL={col}"  + "&FORMAT=tiles" + "&tk=0f4e449733d7e3130129d9a1cc986df2",

                 //   urlTemplate: "https://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=0f4e449733d7e3130129d9a1cc986df2",

                    //http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥
                    //天地影像地图
                    urlTemplate: "https://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=0f4e449733d7e3130129d9a1cc986df2",

                    subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],

                    copyright: "天地图影像",


                });

                var tdtMap_imgbiaozhu = new WebTileLayer({
                    //天地影像地图 标注
                    urlTemplate: "https://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=0f4e449733d7e3130129d9a1cc986df2",

                    subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],

                    copyright: "天地图影像",


                });
            var map = new Map({

                basemap: {

                    baseLayers:[tdtMap_img, tdtMap_imgbiaozhu]//, tiledLayer, tiledLayer_poi]

                },


            });



            var view = new MapView({

                container: "viewDiv",

                map: map,

                zoom: 16,
                popup: {
                    defaultPopupTemplateEnabled: true
                },

                center: [104.072619,30.663776] // longitude, latitude

            });

               view.when(function() {
                  // alert("view when");
                   var layerList = new LayerList({
                       view: view
                   });
// Adds widget below other elements in the top left corner of the view
                   view.ui.add(layerList, {
                        position: "top-left"
                   });
                });

       // });

        view.on("click", function(evt) {


            var mp = evt.mapPoint;
            var sr = mp.spatialReference;
           alert(JSON.stringify(map));
          });

        var extent = new Extent({
            spatialReference: { wkid: 14326 },
            xmax: 105,
            xmin: 105,
            ymax: 31,
            ymin: 30
        });
        view.goTo(extent);



            });
    </script>

</head>



<body>

<div id="viewDiv"></div>

</body>

</html>
